<template>
  <div class="balance-query">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/merit-transfer">功德转移系统</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>余额查询</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">功德余额查询</div>
        <div class="page-subtitle">查询和监控各账户的功德余额情况</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="refreshBalance">
          <ReloadOutlined />
          刷新余额
        </a-button>
      </div>
    </div>

    <!-- 余额总览 -->
    <div class="balance-overview">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="balance-card total">
            <div class="card-icon">
              <WalletOutlined />
            </div>
            <div class="card-content">
              <div class="card-value">{{ balanceOverview.totalBalance }}</div>
              <div class="card-label">系统总余额</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="balance-card available">
            <div class="card-icon">
              <DollarOutlined />
            </div>
            <div class="card-content">
              <div class="card-value">{{ balanceOverview.availableBalance }}</div>
              <div class="card-label">可用余额</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="balance-card frozen">
            <div class="card-icon">
              <LockOutlined />
            </div>
            <div class="card-content">
              <div class="card-value">{{ balanceOverview.frozenBalance }}</div>
              <div class="card-label">冻结余额</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="balance-card pending">
            <div class="card-icon">
              <ClockCircleOutlined />
            </div>
            <div class="card-content">
              <div class="card-value">{{ balanceOverview.pendingBalance }}</div>
              <div class="card-label">待处理余额</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 查询工具 -->
    <div class="query-tools">
      <a-card title="余额查询工具" size="small">
        <a-form layout="inline" :model="queryForm" @finish="handleQuery">
          <a-form-item label="账户类型">
            <a-select v-model:value="queryForm.accountType" style="width: 150px">
              <a-select-option value="">全部类型</a-select-option>
              <a-select-option value="个人">个人账户</a-select-option>
              <a-select-option value="系统">系统账户</a-select-option>
              <a-select-option value="公共">公共池</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="账户名称">
            <a-input v-model:value="queryForm.accountName" placeholder="输入账户名称" style="width: 200px" />
          </a-form-item>
          <a-form-item label="余额范围">
            <a-input-number v-model:value="queryForm.minBalance" placeholder="最小值" style="width: 120px" />
            <span style="margin: 0 8px; color: rgba(255, 255, 255, 0.6)">-</span>
            <a-input-number v-model:value="queryForm.maxBalance" placeholder="最大值" style="width: 120px" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">
              <SearchOutlined />
              查询
            </a-button>
            <a-button @click="resetQuery" style="margin-left: 8px">重置</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

    <!-- 余额列表 -->
    <div class="balance-list">
      <div class="list-header">
        <h3>账户余额详情</h3>
        <div class="header-actions">
          <a-button type="default" @click="exportData">
            <ExportOutlined />
            导出数据
          </a-button>
        </div>
      </div>

      <a-table :columns="columns" :data-source="filteredBalances" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'accountType'">
            <a-tag :color="getAccountTypeColor(record.accountType)">
              {{ record.accountType }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'totalBalance'">
            <span style="color: #ffd700; font-weight: bold">
              {{ record.totalBalance.toLocaleString() }}
            </span>
          </template>
          <template v-if="column.key === 'availableBalance'">
            <span style="color: #52c41a; font-weight: bold">
              {{ record.availableBalance.toLocaleString() }}
            </span>
          </template>
          <template v-if="column.key === 'frozenBalance'">
            <span style="color: #ff4d4f; font-weight: bold">
              {{ record.frozenBalance.toLocaleString() }}
            </span>
          </template>
          <template v-if="column.key === 'balanceChange'">
            <span :style="{ color: record.balanceChange >= 0 ? '#52c41a' : '#ff4d4f' }"> {{ record.balanceChange >= 0 ? '+' : '' }}{{ record.balanceChange.toLocaleString() }} </span>
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="viewDetail(record)"> 查看详情 </a-button>
              <a-button type="link" size="small" @click="viewHistory(record)"> 变动历史 </a-button>
              <a-dropdown>
                <a-button type="link" size="small">
                  更多操作
                  <DownOutlined />
                </a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="freeze" @click="freezeAccount(record)" :disabled="record.status === '冻结'">
                      {{ record.status === '冻结' ? '解冻账户' : '冻结账户' }}
                    </a-menu-item>
                    <a-menu-item key="transfer" @click="transferBalance(record)"> 转移余额 </a-menu-item>
                    <a-menu-item key="adjust" @click="adjustBalance(record)"> 余额调整 </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 查看详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="账户详情" width="800px" :footer="null">
      <div class="account-detail" v-if="selectedAccount">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-card class="detail-card">
              <h4>基本信息</h4>
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="账户ID">{{ selectedAccount.accountId }}</a-descriptions-item>
                <a-descriptions-item label="账户名称">{{ selectedAccount.accountName }}</a-descriptions-item>
                <a-descriptions-item label="账户类型">
                  <a-tag :color="getAccountTypeColor(selectedAccount.accountType)">
                    {{ selectedAccount.accountType }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="账户状态">
                  <a-tag :color="getStatusColor(selectedAccount.status)">
                    {{ selectedAccount.status }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="最后更新">{{ selectedAccount.lastUpdate }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>

          <a-col :span="12">
            <a-card class="detail-card">
              <h4>余额详情</h4>
              <div class="balance-breakdown">
                <div class="balance-item">
                  <span class="label">总余额:</span>
                  <span class="value total">{{ selectedAccount.totalBalance.toLocaleString() }}</span>
                </div>
                <div class="balance-item">
                  <span class="label">可用余额:</span>
                  <span class="value available">{{ selectedAccount.availableBalance.toLocaleString() }}</span>
                </div>
                <div class="balance-item">
                  <span class="label">冻结余额:</span>
                  <span class="value frozen">{{ selectedAccount.frozenBalance.toLocaleString() }}</span>
                </div>
                <div class="balance-item">
                  <span class="label">待处理余额:</span>
                  <span class="value pending">{{ selectedAccount.pendingBalance.toLocaleString() }}</span>
                </div>
                <div class="balance-item">
                  <span class="label">今日变动:</span>
                  <span class="value" :style="{ color: selectedAccount.balanceChange >= 0 ? '#52c41a' : '#ff4d4f' }"> {{ selectedAccount.balanceChange >= 0 ? '+' : '' }}{{ selectedAccount.balanceChange.toLocaleString() }} </span>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-modal>

    <!-- 变动历史模态框 -->
    <a-modal v-model:open="showHistoryModal" title="余额变动历史" width="1000px" :footer="null">
      <div v-if="selectedAccount">
        <a-table :columns="historyColumns" :data-source="balanceHistory" :pagination="false" row-key="id" size="small">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'type'">
              <a-tag :color="getTransactionTypeColor(record.type)">
                {{ record.type }}
              </a-tag>
            </template>
            <template v-if="column.key === 'amount'">
              <span :style="{ color: record.amount >= 0 ? '#52c41a' : '#ff4d4f', fontWeight: 'bold' }"> {{ record.amount >= 0 ? '+' : '' }}{{ record.amount.toLocaleString() }} </span>
            </template>
            <template v-if="column.key === 'balanceAfter'">
              <span style="color: #ffd700; font-weight: bold">
                {{ record.balanceAfter.toLocaleString() }}
              </span>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>

    <!-- 转移余额模态框 -->
    <a-modal v-model:open="showTransferModal" title="转移余额" width="600px" @ok="submitTransfer" :confirmLoading="transferLoading">
      <a-form :model="transferForm" :rules="transferRules" layout="vertical" ref="transferFormRef">
        <a-form-item label="源账户" name="fromAccount">
          <a-input :value="selectedAccount?.accountName" disabled />
        </a-form-item>

        <a-form-item label="目标账户" name="toAccount" required>
          <a-select v-model:value="transferForm.toAccount" placeholder="请选择目标账户">
            <a-select-option v-for="account in balanceData.filter((acc) => acc.id !== selectedAccount?.id)" :key="account.id" :value="account.accountId"> {{ account.accountName }} ({{ account.accountId }}) </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="转移金额" name="amount" required>
          <a-input-number v-model:value="transferForm.amount" :min="1" :max="selectedAccount?.availableBalance" placeholder="转移金额" style="width: 100%" />
          <div style="margin-top: 4px; color: rgba(255, 255, 255, 0.6); font-size: 12px">可用余额: {{ selectedAccount?.availableBalance.toLocaleString() }}</div>
        </a-form-item>

        <a-form-item label="转移原因" name="reason" required>
          <a-textarea v-model:value="transferForm.reason" :rows="3" placeholder="请说明转移原因" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 余额调整模态框 -->
    <a-modal v-model:open="showAdjustModal" title="余额调整" width="500px" @ok="submitAdjustment" :confirmLoading="adjustLoading">
      <a-form :model="adjustForm" :rules="adjustRules" layout="vertical" ref="adjustFormRef">
        <a-form-item label="账户信息">
          <a-input :value="`${selectedAccount?.accountName} (${selectedAccount?.accountId})`" disabled />
        </a-form-item>

        <a-form-item label="调整类型" name="type" required>
          <a-radio-group v-model:value="adjustForm.type">
            <a-radio value="increase">增加余额</a-radio>
            <a-radio value="decrease">减少余额</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="调整金额" name="amount" required>
          <a-input-number v-model:value="adjustForm.amount" :min="1" placeholder="调整金额" style="width: 100%" />
        </a-form-item>

        <a-form-item label="调整原因" name="reason" required>
          <a-select v-model:value="adjustForm.reason" placeholder="请选择调整原因">
            <a-select-option value="系统错误修正">系统错误修正</a-select-option>
            <a-select-option value="管理员手动调整">管理员手动调整</a-select-option>
            <a-select-option value="业务补偿">业务补偿</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="备注说明" name="note">
          <a-textarea v-model:value="adjustForm.note" :rows="2" placeholder="请详细说明调整原因（可选）" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useSalvationStore } from '@/stores/salvation'
import { ReloadOutlined, WalletOutlined, DollarOutlined, LockOutlined, ClockCircleOutlined, SearchOutlined, ExportOutlined, DownOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'

const salvationStore = useSalvationStore()

// 余额总览数据
const balanceOverview = ref({
  totalBalance: 1586420,
  availableBalance: 1234567,
  frozenBalance: 251853,
  pendingBalance: 100000
})

// 查询表单
const queryForm = ref({
  accountType: '',
  accountName: '',
  minBalance: null,
  maxBalance: null
})

// 模态框状态
const showDetailModal = ref(false)
const showHistoryModal = ref(false)
const showTransferModal = ref(false)
const showAdjustModal = ref(false)
const selectedAccount = ref(null)
const transferLoading = ref(false)
const adjustLoading = ref(false)
const transferFormRef = ref()
const adjustFormRef = ref()

// 转移表单数据
const transferForm = ref({
  toAccount: '',
  amount: null,
  reason: ''
})

// 调整表单数据
const adjustForm = ref({
  type: 'increase',
  amount: null,
  reason: '',
  note: ''
})

// 表单验证规则
const transferRules = {
  toAccount: [{ required: true, message: '请选择目标账户', trigger: 'change' }],
  amount: [{ required: true, message: '请输入转移金额', trigger: 'blur' }],
  reason: [{ required: true, message: '请说明转移原因', trigger: 'blur' }]
}

const adjustRules = {
  type: [{ required: true, message: '请选择调整类型', trigger: 'change' }],
  amount: [{ required: true, message: '请输入调整金额', trigger: 'blur' }],
  reason: [{ required: true, message: '请选择调整原因', trigger: 'change' }]
}

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`
})

// 模拟余额数据
const balanceData = ref([
  {
    id: 'BA001',
    accountId: 'ACC001',
    accountName: '观音使者',
    accountType: '个人',
    totalBalance: 45600,
    availableBalance: 42800,
    frozenBalance: 2800,
    pendingBalance: 0,
    balanceChange: +1200,
    lastUpdate: '2024-01-15 10:30:00',
    status: '正常'
  },
  {
    id: 'BA002',
    accountId: 'ACC002',
    accountName: '地藏菩萨',
    accountType: '个人',
    totalBalance: 89300,
    availableBalance: 85600,
    frozenBalance: 3700,
    pendingBalance: 0,
    balanceChange: -850,
    lastUpdate: '2024-01-15 09:15:00',
    status: '正常'
  },
  {
    id: 'BA003',
    accountId: 'SYS001',
    accountName: '功德池',
    accountType: '系统',
    totalBalance: 1200000,
    availableBalance: 980000,
    frozenBalance: 120000,
    pendingBalance: 100000,
    balanceChange: +25000,
    lastUpdate: '2024-01-15 11:20:00',
    status: '正常'
  },
  {
    id: 'BA004',
    accountId: 'ACC003',
    accountName: '文殊菩萨',
    accountType: '个人',
    totalBalance: 67800,
    availableBalance: 65200,
    frozenBalance: 2600,
    pendingBalance: 0,
    balanceChange: +340,
    lastUpdate: '2024-01-15 08:45:00',
    status: '正常'
  },
  {
    id: 'BA005',
    accountId: 'ACC004',
    accountName: '普贤菩萨',
    accountType: '个人',
    totalBalance: 0,
    availableBalance: 0,
    frozenBalance: 0,
    pendingBalance: 0,
    balanceChange: -15000,
    lastUpdate: '2024-01-14 16:20:00',
    status: '冻结'
  }
])

// 模拟历史记录数据
const balanceHistory = ref([
  {
    id: 'BH001',
    date: '2024-01-15 10:30:00',
    type: '转入',
    amount: +1200,
    balanceAfter: 45600,
    description: '超度仪式奖励',
    operator: '系统'
  },
  {
    id: 'BH002',
    date: '2024-01-15 09:15:00',
    type: '转出',
    amount: -800,
    balanceAfter: 44400,
    description: '购买法器',
    operator: '观音使者'
  },
  {
    id: 'BH003',
    date: '2024-01-14 16:20:00',
    type: '冻结',
    amount: 0,
    balanceAfter: 45200,
    description: '账户安全检查',
    operator: '系统管理员'
  }
])

// 表格列配置
const columns = [
  {
    title: '账户ID',
    dataIndex: 'accountId',
    key: 'accountId',
    width: 100
  },
  {
    title: '账户名称',
    dataIndex: 'accountName',
    key: 'accountName',
    width: 120
  },
  {
    title: '类型',
    dataIndex: 'accountType',
    key: 'accountType',
    width: 80
  },
  {
    title: '总余额',
    dataIndex: 'totalBalance',
    key: 'totalBalance',
    width: 120
  },
  {
    title: '可用余额',
    dataIndex: 'availableBalance',
    key: 'availableBalance',
    width: 120
  },
  {
    title: '冻结余额',
    dataIndex: 'frozenBalance',
    key: 'frozenBalance',
    width: 120
  },
  {
    title: '待处理',
    dataIndex: 'pendingBalance',
    key: 'pendingBalance',
    width: 100
  },
  {
    title: '余额变动',
    dataIndex: 'balanceChange',
    key: 'balanceChange',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80
  },
  {
    title: '最后更新',
    dataIndex: 'lastUpdate',
    key: 'lastUpdate',
    width: 160
  },
  {
    title: '操作',
    key: 'actions',
    width: 200
  }
]

// 历史记录表格列
const historyColumns = [
  { title: '时间', dataIndex: 'date', key: 'date', width: 160 },
  { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
  { title: '变动金额', dataIndex: 'amount', key: 'amount', width: 120 },
  { title: '变动后余额', dataIndex: 'balanceAfter', key: 'balanceAfter', width: 120 },
  { title: '说明', dataIndex: 'description', key: 'description', width: 200 },
  { title: '操作人', dataIndex: 'operator', key: 'operator', width: 100 }
]

// 过滤后的余额列表
const filteredBalances = computed(() => {
  let result = balanceData.value

  // 账户类型筛选
  if (queryForm.value.accountType) {
    result = result.filter((balance) => balance.accountType === queryForm.value.accountType)
  }

  // 账户名称搜索
  if (queryForm.value.accountName) {
    result = result.filter((balance) => balance.accountName.includes(queryForm.value.accountName) || balance.accountId.includes(queryForm.value.accountName))
  }

  // 余额范围筛选
  if (queryForm.value.minBalance !== null) {
    result = result.filter((balance) => balance.totalBalance >= queryForm.value.minBalance)
  }
  if (queryForm.value.maxBalance !== null) {
    result = result.filter((balance) => balance.totalBalance <= queryForm.value.maxBalance)
  }

  pagination.value.total = result.length
  return result
})

// 刷新余额
const refreshBalance = () => {
  message.success('余额已刷新')
}

// 查询处理
const handleQuery = () => {
  pagination.value.current = 1
}

// 重置查询
const resetQuery = () => {
  queryForm.value = {
    accountType: '',
    accountName: '',
    minBalance: null,
    maxBalance: null
  }
  pagination.value.current = 1
}

// 导出数据
const exportData = () => {
  message.success('数据导出功能开发中...')
}

// 查看详情
const viewDetail = (record) => {
  selectedAccount.value = record
  showDetailModal.value = true
}

// 查看历史
const viewHistory = (record) => {
  selectedAccount.value = record
  showHistoryModal.value = true
}

// 冻结账户
const freezeAccount = (record) => {
  const action = record.status === '冻结' ? '解冻' : '冻结'

  Modal.confirm({
    title: `确认${action}账户`,
    content: `确定要${action}账户"${record.accountName}"吗？`,
    okText: `确认${action}`,
    okType: action === '冻结' ? 'danger' : 'primary',
    cancelText: '取消',
    onOk: async () => {
      try {
        // 模拟API调用
        await new Promise((resolve) => setTimeout(resolve, 1000))

        // 更新账户状态
        const index = balanceData.value.findIndex((item) => item.id === record.id)
        if (index !== -1) {
          balanceData.value[index].status = action === '冻结' ? '冻结' : '正常'
          balanceData.value[index].lastUpdate = new Date().toLocaleString()
        }

        message.success(`账户已${action}`)
      } catch (error) {
        message.error(`${action}失败，请重试`)
      }
    }
  })
}

// 转移余额
const transferBalance = (record) => {
  selectedAccount.value = record
  transferForm.value = {
    toAccount: '',
    amount: null,
    reason: ''
  }
  showTransferModal.value = true
}

// 提交转移
const submitTransfer = async () => {
  try {
    await transferFormRef.value.validate()
    transferLoading.value = true

    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 2000))

    // 更新余额数据
    const fromIndex = balanceData.value.findIndex((item) => item.id === selectedAccount.value.id)
    if (fromIndex !== -1) {
      balanceData.value[fromIndex].availableBalance -= transferForm.value.amount
      balanceData.value[fromIndex].totalBalance -= transferForm.value.amount
      balanceData.value[fromIndex].lastUpdate = new Date().toLocaleString()
    }

    showTransferModal.value = false
    message.success('余额转移成功')
  } catch (error) {
    console.error('转移失败:', error)
  } finally {
    transferLoading.value = false
  }
}

// 调整余额
const adjustBalance = (record) => {
  selectedAccount.value = record
  adjustForm.value = {
    type: 'increase',
    amount: null,
    reason: '',
    note: ''
  }
  showAdjustModal.value = true
}

// 提交调整
const submitAdjustment = async () => {
  try {
    await adjustFormRef.value.validate()
    adjustLoading.value = true

    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 2000))

    // 更新余额数据
    const index = balanceData.value.findIndex((item) => item.id === selectedAccount.value.id)
    if (index !== -1) {
      const adjustAmount = adjustForm.value.type === 'increase' ? adjustForm.value.amount : -adjustForm.value.amount
      balanceData.value[index].availableBalance += adjustAmount
      balanceData.value[index].totalBalance += adjustAmount
      balanceData.value[index].balanceChange = adjustAmount
      balanceData.value[index].lastUpdate = new Date().toLocaleString()
    }

    showAdjustModal.value = false
    message.success('余额调整成功')
  } catch (error) {
    console.error('调整失败:', error)
  } finally {
    adjustLoading.value = false
  }
}

// 获取账户类型颜色
const getAccountTypeColor = (type) => {
  const colors = {
    个人: 'blue',
    系统: 'green',
    公共: 'purple'
  }
  return colors[type] || 'default'
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    正常: 'success',
    冻结: 'error',
    限制: 'warning'
  }
  return colors[status] || 'default'
}

// 获取交易类型颜色
const getTransactionTypeColor = (type) => {
  const colors = {
    转入: 'green',
    转出: 'blue',
    冻结: 'orange',
    解冻: 'cyan',
    调整: 'purple'
  }
  return colors[type] || 'default'
}

onMounted(() => {
  console.log('功德余额查询页面已加载')
})
</script>

<style lang="scss" scoped>
.balance-query {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }
  }

  // 余额总览
  .balance-overview {
    margin-bottom: 32px;

    .balance-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fff;
      }

      .card-content {
        .card-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .card-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }

      &.total .card-icon {
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      &.available .card-icon {
        background: rgba(82, 196, 26, 0.2);
        color: #52c41a;
      }

      &.frozen .card-icon {
        background: rgba(245, 34, 45, 0.2);
        color: #ff4d4f;
      }

      &.pending .card-icon {
        background: rgba(24, 144, 255, 0.2);
        color: #1890ff;
      }
    }
  }

  // 查询工具
  .query-tools {
    margin-bottom: 32px;

    :deep(.ant-card) {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .ant-card-head-title {
          color: #fff;
        }
      }

      .ant-card-body {
        padding: 16px;
      }
    }

    :deep(.ant-form-item-label > label) {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  // 余额列表
  .balance-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        margin: 0;
        color: #fff;
        font-size: 1.2rem;
      }
    }

    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .ant-table-tbody > tr > td {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }

  // 模态框样式
  .account-detail {
    .detail-card {
      margin-bottom: 20px;
      h4 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #fff;
        font-size: 1.1rem;
      }
      .balance-breakdown {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        .balance-item {
          display: flex;
          align-items: center;
          .label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            margin-right: 8px;
          }
          .value {
            font-size: 1.1rem;
            font-weight: bold;
            color: #fff;
          }
          &.total .value {
            color: #ffd700;
          }
          &.available .value {
            color: #52c41a;
          }
          &.frozen .value {
            color: #ff4d4f;
          }
          &.pending .value {
            color: #1890ff;
          }
        }
      }
    }
  }
}

// 全局模态框样式
:deep(.ant-modal) {
  .ant-modal-content {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .ant-modal-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .ant-modal-title {
      color: #fff;
    }
  }

  .ant-modal-body {
    background: transparent;
    color: #fff;
  }

  .ant-modal-footer {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

// 卡片样式
:deep(.ant-card) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;

  .ant-card-head {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .ant-card-head-title {
      color: #ffd700;
      font-weight: bold;
    }
  }

  .ant-card-body {
    background: transparent;
    color: #fff;
  }
}

// 描述列表样式
:deep(.ant-descriptions) {
  .ant-descriptions-item-label {
    color: rgba(255, 255, 255, 0.8);
  }

  .ant-descriptions-item-content {
    color: #fff;
  }
}

// 表单样式
:deep(.ant-form) {
  .ant-form-item-label > label {
    color: rgba(255, 255, 255, 0.9);
  }

  .ant-input,
  .ant-input-number,
  .ant-select-selector,
  .ant-select-selection-search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;

    &:hover {
      border-color: #ffd700;
    }

    &:focus {
      border-color: #ffd700;
      box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
    }
  }

  .ant-input::placeholder,
  .ant-input-number-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .ant-select-dropdown {
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);

    .ant-select-item-option {
      color: #fff;

      &:hover {
        background: rgba(255, 215, 0, 0.1);
      }

      &.ant-select-item-option-selected {
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }
    }
  }

  .ant-radio-group {
    .ant-radio-wrapper {
      color: rgba(255, 255, 255, 0.8);

      .ant-radio-checked .ant-radio-inner {
        background-color: #ffd700;
        border-color: #ffd700;
      }

      &:hover .ant-radio-inner {
        border-color: #ffd700;
      }
    }
  }

  .ant-input-number-handler-wrap {
    background: rgba(255, 255, 255, 0.1);

    .ant-input-number-handler {
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.6);

      &:hover {
        color: #ffd700;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .balance-query {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .balance-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .card-content .card-value {
        font-size: 1.5rem;
      }
    }

    .balance-list .list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .account-detail {
      .balance-breakdown {
        flex-direction: column;
        gap: 10px;
      }
    }
  }
}
</style>
